<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <link href="../static/css/forgetPassword.css"  rel="stylesheet" th:href="@{/css/forgetPassword.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<div class="container">
    <div>
        <div class="header">
            <h1>重置密码</h1>
        </div>
        <div class="main">
            <form class="forgetPassword" th:action="@{/forgetPassword}" method="post" onsubmit="return dosubmit(this)">
                <span>
                    <i class="iconfont emailL" style="left: 7px; top: 10px;">&#xe63e;</i>
                    <input type="text" placeholder="  邮箱" class="input_txt" name="email" th:value="${session.forgetPasswordEmail} ?: ''">
                    <span id="resultEmail"></span>
                </span><br>

                <span class="code-outer">
                    <i class="iconfont" style="top: 10px;">&#xe609;</i>
                    <input type="text" placeholder="  验证码" class="input_code" name="code" th:value="${session.forgetPasswordCode} ?: ''">
                    <button class="get-code" type="button" onclick="sendCode(this.form.email.value,this)" >获取验证码</button>
                </span><br>
                <span >
                    <i class="iconfont passwordL"  style="left: 7px; top: 9px;">&#xe69e;</i>
                    <input type="password" placeholder="  请输入新密码" class="input_password" name="password" th:value="${session.forgetPasswordPassword} ?: ''">
                    <span id="resultPassword"></span>
                    <div class="openEyes1 iconfont" >&#xebcc;</div>
                    <div class="closeEyes1 iconfont">&#xebcd;</div>
                </span><br>

                <span >
                    <i class="iconfont">&#xe69f;</i>
                    <input type="password" placeholder="  请再次输入新密码" class="input_password-again" >
                    <span id="resultPasswordAgain"></span>
                    <div class="openEyes2 iconfont" >&#xebcc;</div>
                    <div class="closeEyes2 iconfont">&#xebcd;</div>
                </span><br>

                <button class="button" >确定</button>
                <button class="returnEnter" type="button">返回登录</button>
            </form>
        </div>
    </div>
    <div class="img">
        <img src="./img/name.png" alt="" class="name">
        <img src="./img/logo.png" alt="" class="logo">
    </div>
    <div>
        <img src="./img/古书翻页_爱给网_aigei_com.gif" alt="" class="book" th:src="@{/img/古书翻页_爱给网_aigei_com.gif}">
    </div>
    <div>
        <img src="./img/钥匙(Key)_爱给网_aigei_com.gif" alt="" class="key" th:src="@{/img/钥匙(Key)_爱给网_aigei_com.gif}">
    </div>
</div>


<script th:inline="javascript">

    let result = [[${result}]];
    let returnEnter=document.getElementsByClassName('returnEnter')
    for(let i=0;i<returnEnter.length;i++){
        returnEnter[i].addEventListener('click',()=>{

            window.location.href = "http://localhost:8080/login";
        })
    }
    function clearSessionData() {
        $.ajax({
            url: "/login/deleteSession",      // 后端接口路径
            method: "POST",             // 对应后端的 @PostMapping
            success: function(response) {
                console.log("Session 数据已清除");
                console.log(response)
            },
            error: function(error) {
                console.error("清除 Session 失败:", error);

            }
        });
    }
    clearSessionData()
    let errorMessage = [[${errorMessage}]];
    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter=document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if(alertMessage.textContent==null){
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }

    if (errorMessage && errorMessage !== '') {
        showCustomAlert(errorMessage, 3000);
    }
</script>

</body>
<script src="../static/js/forgetPassword.js" th:src="@{/js/forgetPassword.js}"></script>
</html>